<template>
  <div class="orderCont" :style="'min-height: '+docheight+'px'">
    <div v-if="!showTimeOut&&showCont">
      <div class="orderHead">
        <serch-com placher="请输入订单号查询" @serchClick="serchFn" color="#6d94f8"></serch-com>
        <div class="orderTop">
          <div class="orderNav">
            <div :class="stepId==item.id?'navItem_active':'navItem'" @click="navFn(item)" :key="index" v-for="(item,index) in navArr">{{item.val}}</div>
          </div>
        </div>
      </div>
      <div class="orderList" v-if="orderList.length>0">
        <div class="orderItem" :key="index" v-for="(item,index) in orderList">
          <div class="shopTop">
            <div class="shopNameCont">
              <div class="shopName">订单号:{{ item.order_number }}</div>
            </div>
            <div class="orderStatus">
              <span class="redText" v-if="item.order_status==1">待付款</span>
              <span class="blueText" v-if="item.order_status==2">待确认</span>
              <span class="greenText" v-if="item.order_status==3">已完成</span>
              <span class="blackText" v-if="item.order_status==4">已关闭</span>
              <span class="blackText" v-if="item.order_status==5">已退款</span>
            </div>
          </div>
          <div class="goodsList">
            <div class="goodsItem" :key="index2" v-for="(item2,index2) in item.goods_info" @click="toDetail(item)">
              <div class="goodsImg">
                <img :src="item2.goods_image+ossSrc">
              </div>
              <div class="goodsInfo">
                <div class="goodsName">{{ item2.goods_name }}</div>
                <div class="goodsType">
                  <div class="goodsTypeItem">商品数量：x{{ item2.num }}</div>
                </div>
                <div class="goodsInfoPrice">
                  <div>商品总价:¥{{ item2.goods_total }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="orderAllMoney">订单实付:¥{{ item.order_total_price }}</div>
          <div class="goodsCtrl">
            <div class="orderBtn pinkBtn" v-if="item.order_status==2" @click="cancelFn(item,index)">驳回订单</div>
            <div class="orderBtn pinkBtn backBtn" v-if="item.order_status==2" @click="ctrlFn(item,index)">确认接单({{ item.delivery_time=='- -'?'邮寄':'上门' }})</div>
          </div>
        </div>
      </div>
      <div class="loadMore" v-if="isChageNav">数据请求中~</div>
      <div class="loadMore" v-if="orderList.length>0&&!isChageNav">{{ loadMoreText }}</div>
      <nodata v-if="orderList.length==0&&!isChageNav" text="暂无该类订单~"></nodata>
      <van-popup v-model:show="showConfirm" round position="bottom">
        <div class="orderMask">
            <div class="maskTitle">{{ maskTitle }}</div>
            <div class="maskTip">{{ maskTipCont }}</div>
            <saveBtn color="#6d94f8" style="width: 100%;margin-top: 0.75rem;" :value="maskBtnCont" @saveClick="sureMask"></saveBtn>
        </div>
      </van-popup>
    </div>
    <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <sub-load v-if="showLoad"></sub-load>
    <footcpm></footcpm>
  </div>
</template>

<script>
import nodata from '@/components/public/nodata'
import serchCom from '@/components/public/serchCom.vue'
import footcpm from '@/components/footcpm'
import SaveBtn from "@/components/public/saveBtn.vue";

import { orderList,orderComplete,orderCancel } from '@/http/api'
import {Toast } from 'vux'
import getLoad from '@/components/public/getLoad'
import subLoad from '@/components/public/subLoad.vue'

import getTimeOut from '@/components/public/getTimeOut'
export default {
  components:{SaveBtn,footcpm,subLoad,getLoad,getTimeOut,nodata,serchCom,Toast},
  data(){
    return{
      loadMoreText:'数据加载中~',
      isChageNav:false,
      showLoad:false,
      showTimeOut: false,
      showCont:true,
      navArr:[
        {val:'全部',id:0},
        {val:'待确认',id:2},
        {val:'已完成',id:3},
        {val:'已退款',id:5},
      ],
      showText:'',
      showToast:false,
      serchKey:'',
      stepId:0,
      per_page:10,
      page:1,
      orderList:[],
      
      showConfirm:false,
      activeOrder:{},
      activeIndex:0,
      ctrlIndex:0,
      // 分页
      getting:false,
      last_page:0,
      maskTitle:'',
      maskTipCont:'',
      maskBtnCont:'确认接单',
    }
  },
  methods:{
    cancelFn(item,index){
      this.showConfirm = true
      this.maskTitle = '驳回订单提示'
      this.maskTipCont = '确认驳回此订单吗？驳回之后金额将原来退回客户账户，订单将关闭。'
      this.maskBtnCont = '确认驳回'
      this.activeIndex = index
      this.activeOrder = item
    },
    ctrlFn(item,index){
      this.showConfirm = true
      this.maskBtnCont=  '确认接单'
      if(item.delivery_time!='- -'){
        this.maskTitle = '上门服务订单'
        this.maskTipCont = '此订单为上门服务订单，点击确认之后订单状态将转为完成状态。'
      }else{
        this.maskTitle = '邮寄配送订单'
        this.maskTipCont = '此订单为邮寄配送订单，请留意订单的地址，点击确认之后订单状态将转为完成状态'
      }
      this.activeIndex = index
      this.activeOrder = item
    },
    sureMask(){
      if(this.maskBtnCont=='确认接单'){
        this.sureFn(this.activeOrder)
      }else{
        this.cancelApiFn(this.activeOrder)
      }
    },
    cancelApiFn(item){
      let data ={
        order_id:item.order_id
      }
      this.showConfirm = false
      if(!this.showLoad){
        this.showLoad = true
        orderCancel(data).then((res)=>{
          if(res.data.code==1){
            this.showToast = true
            this.showText = '驳回订单成功'
            if(this.stepId==0){
              item.order_status = 5
            }else{
              this.orderList.splice(this.activeIndex,1)
            }
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showLoad = false
        }).catch(()=>{
          this.showLoad = false
          this.showToast = true
          this.showText = '网络请求超时'
        })
      }
    },
    sureFn(item){
      let data ={
        order_id:item.order_id
      }
      this.showConfirm = false
      if(!this.showLoad){
        this.showLoad = true
        orderComplete(data).then((res)=>{
          if(res.data.code==1){
            this.showToast = true
            this.showText = '接单成功'
            if(this.stepId==0){
              item.order_status = 3
            }else{
              this.orderList.splice(this.activeIndex,1)
            }
          }else{
            this.showToast = true
            this.showText = res.data.msg
          }
          this.showLoad = false
        }).catch(()=>{
          this.showLoad = false
          this.showToast = true
          this.showText = '网络请求超时'
        })
      }
    },
    serchFn(val){
      this.serchKey = val
      this.page = 1
      this.last_page = 0
      this.orderList = []
      this.getData()
    },
    navFn(item){
      this.stepId = item.id
      this.orderList = []
      this.page = 1
      this.getData()
    },
    toDetail(item){
      this.$router.push({path:'/orderDetail',query:{id:item.order_id}})
    },
    getData(){
      let data ={
        order_status:this.stepId,
        order_number:this.serchKey,
        per_page:this.per_page,
        page:this.page,
      }
      this.isChageNav = true
      orderList(data).then((res)=>{
        if(res.data.code==1){
          let arr = res.data.data.data
          for(let i=0;i<arr.length;i++){
            this.orderList.push(arr[i])
          }
          setTimeout(() => {
            this.getting = false
          }, 100);
          this.last_page = res.data.data.last_page
          if(this.page==this.last_page){
            this.loadMoreText = '到底啦～'
          }else{
            this.loadMoreText = '数据加载中~'
          }
        }else{
          this.showToast = true
          this.showText = '订单获取失败'
        }
        this.showCont= true
        this.isChageNav = false

      }).catch(()=>{
        this.showCont = true
        this.showTimeOut = true
      })
    },
    nextfn(){
      if(this.$route.path == '/order'){
        let h = document.documentElement.scrollHeight||document.body.scrollHeight
        let wh = document.documentElement.clientHeight||document.body.clientHeight
        let top = document.documentElement.scrollTop||document.body.scrollTop
        let bottom = h-wh-top
        if(bottom<=50){
          if(this.getting==false){
            if(this.last_page>this.page){
              this.getting=  true
              this.page++
              this.getData()
            }
          }
        }
      }
    }
  },
  mounted() {
    window.addEventListener('scroll',this.nextfn)
  },
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="less">
.orderCont{
  width: 100%;
  background-color: #edf2ff;
  box-sizing: border-box;
  padding-bottom: 3.25rem;
  padding-top: 6.5rem;
  .orderHead{
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    
    .orderTop{
      width: 100%;
      padding: 0 4%;
      box-sizing: border-box;
      background-color: #fff;
      .orderNav{
        width: 100%;
        display: flex;
        position: relative;
        justify-content: space-between;
        .navItem,.navItem_active{
          width: 25%;
          text-align: center;
          padding: 0.75rem;
          box-sizing: border-box;
          font-size: 0.7rem;
          color: #666;
          white-space: nowrap;
        }
        .navItem_active{
          color: #6d94f8;
          border-bottom: 1px solid #6d94f8;
        }
      }
    }
  }
  .orderList{
    width: 100%;
    padding: 0.25rem 4%;
    box-sizing: border-box;
    .orderItem{
      width: 100%;
      background-color: #fff;
      margin-bottom: 0.75rem;
      border-radius: 0.25rem;
      padding: 0 0.75rem 1rem;
      box-sizing: border-box;
      .shopTop{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        .shopNameCont{
          flex: 1;
          width: 0.5rem;
          display: flex;
          padding: 0.75rem 0;
          align-items: center;
          margin-right: 0.5rem;
          .shopicon{
            font-size: 1.1rem;
            margin-right: 0.25rem;
          }
          .shopName{
            font-size: 0.7rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .icon-jinrujiantou{
            font-size: 0.8rem;
            position: relative;
          }
        }
        .orderStatus{
          font-size: 0.6rem;
          .redText{
            color: #f9406e;
          }
          .greenText{
            color: #85CE61;
          }
          .blackText{
            color: #666;
          }
          .blueText{
            color: #96A1FE;
          }
        }
      }
      .goodsList{
        width: 100%;
        .goodsItem{
          width: 100%;
          margin-bottom: 0.75rem;
          display: flex;
          align-items: center;
          .goodsImg{
            width: 4rem;
            height: 4rem;
            overflow: hidden;
            border-radius: 0.25rem;
            margin-right: 0.5rem;
            img{
              width: 100%;
            }
          }
          .goodsInfo{
            width: 0.5rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 4rem;
            justify-content: space-between;
            .goodsName{
              width: 100%;
              line-height: 1rem;
              font-size: 0.7rem;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap;
            }
            .orderTime{
              font-size: 0.6rem;
              color: #666;
            }
            .goodsType{
              display: flex;
              align-items: center;
              justify-content: space-between;
              .goodsNumCont{
                display: flex;
                height: 1rem;
                line-height: 1rem;
                color: #999;
                font-size: 0.6rem;
                align-items: center;
              }
              .goodsTypeItem{
                padding:0.1rem 0.5rem;
                background-color: #edf2ff;
                font-size: 0.6rem;
                height: 1rem;
                line-height: 1rem;
                border-radius: 0.75rem;
                color: #6d94f8;
              }
              .goldTag{
                background-color: #fbebd0;
                color: #f9b540;
              }
            }
            .goodsInfoPrice{
              color: #999;
              font-size: 0.6rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .allItemMoney{
                color: #6d94f8;
              }
            }
          }
        }
      }
      .orderAllMoney{
        color: #6d94f8;
        text-align: right;
        font-size: 0.6rem;
        margin: 0.75rem 0;
      }
      .orderSumCont{
        font-size: 0.6rem;
        text-align: right;
        color: #333;
        .priceVal{
          position: relative;
          top: 0.1rem;
          color: #6d94f8;
        }
      }
      .orderTip{
        font-size: 0.6rem;
        color: #999;
        text-align: right;
        margin-top: 0.5rem;
      }
      .goodsCtrl{
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.75rem;
        justify-content: flex-end;
        .orderBtn{
          padding: 0.35rem 0.75rem;
          // width: 25%;
          text-align: center;
          border-radius: 1rem;
          font-size: 0.6rem;
          box-sizing: border-box;
          margin-left: 0.5rem;
        }
        .pinkBtn{
          border: 1px solid #6d94f8;
          color: #6d94f8;
        }
        .backBtn{
          background-color: #6d94f8;
          color: #fff;
        }
        .blackBtn{
          border: 1px solid #999;
          color: #666;
        }
      }
      .orderDes{
        border-top: 1px dashed #ebebeb;
        padding-top: 0.75rem;
        color: #666;
        font-size: 0.6rem;
      }
    }
  }
  .loadMore{
    text-align: center;
    padding: 0.75rem 0;
    font-size: 0.6rem;
    color: #6d94f8;
  }
  .orderMask{
  padding: 0.75rem;
  box-sizing: border-box;
  .maskTitle{
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
  }
  .maskTip{
    margin-top: 0.5rem;
    line-height: 1.1rem;
  }
}
}
</style>
